<template>
  <div class="article-foot-bar">
    <div class="wrapper">
      <div class="wrapper-flex">
        <van-search
          @click="onComment"
          v-model="value"
          style="width: 50%"
          background="#F0F0F0"
          left-icon="edit"
          placeholder="让我说啥好呢..."
        />
        <div @click="onGoToComment" class="icon">
          <van-icon name="chat-o" size="25" :badge="commentCnt" />
        </div>
        <div @click="onGood" class="icon">
          <van-icon :name="iconGood" :color="goodColor" size="25" :badge="praiseCnt" />
        </div >
        <div @click="onShare" class="icon">
          <van-icon name="upgrade" size="25" style="margin-right: 20px"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Test',
  inheritAttrs: false,
  props: {
    iconGood: { type: String, default: 'good-job-o' }, // 点赞图标
    goodColor: { type: String, default: 'gray' }, // 点赞图标
    onComment: { type: Function, required: true }, // 评论
    onGoToComment: { type: Function, required: true }, // 跳转至评论
    onGood: { type: Function, required: true }, // 点赞
    onShare: { type: Function, required: true }, // 分享
    commentCnt: { type: Number, required: true }, // 评论数量
    praiseCnt: { type: Number, required: true } // 点赞数量
  },
  data () {
    return {
      value: ''
    }
  }
}
</script>

<style scoped type="scss">
  .article-foot-bar{
    height: 60px;
  }
  .wrapper{
    position: fixed;
    bottom: 0px;
    width: 100%;
    background-color: #F0F0F0;
    z-index: 101;
    border-top: #F0F0F0 1px solid;
    padding-bottom: 20px;
  }
  .wrapper-flex{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #F0F0F0;
  }
  .icon{
  }
</style>
